<template>
  <div>
    <div class="home-category">
      <ul>
        <li
          v-for="(item, index) in broadside"
          :key="index"
          @mousedown="addrouter(item.id)"
          @mouseover="textVer(index)"
          @mouseout="textOut(index)"
          :class="{ activeText: handBox == index }"
        >
          <a href="">{{ item.name }}</a>
          <a
            href=""
            v-for="(i, index) in item.children.slice(0, 2)"
            :key="index"
            >{{ i.name }}</a
          >
        </li>
      </ul>
      <div class="classify" v-show="show">
        <h4>
          {{ handBox == broadside.length - 1 ? "品牌" : "分类" }}推荐
          <span>根据您的购买或浏览记录推荐</span>
        </h4>
        <ul v-if="broadside[handBox]">
          <li v-for="(items, index) in broadside[handBox].goods" :key="index">
            <div class="components">
              <div class="imgsBox">
                <img :src="items.picture" alt="" />
              </div>
              <div class="detailedinformation">
                <p class="introduce">{{ items.name }}</p>
                <p class="Productname">{{ items.desc }}</p>
                <p class="price">{{ items.price }}</p>
              </div>
            </div>
          </li>
        </ul>
        <ul v-if="handBox == broadside.length - 1">
          <li v-for="(items, index) in brand" :key="index" class="brand">
            <div class="components">
              <div class="imgsBox1">
                <img :src="items.picture" alt="" />
              </div>
              <div class="detailedinformation1">
                <p class="introduce1">{{ items.place }}</p>
                <p class="Productname1">{{ items.name }}</p>
                <p class="price1">{{ items.desc }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      broadside: [],
      handBox: -1,

      show: false,
      brand: [],
    };
  },
  mounted() {
    axios
      .get("http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head")
      .then((res) => {
        //   console.log(res);
        this.broadside = res.data.result;
        this.broadside.push({
          name: "品牌",
          children: [{ name: "品牌推荐" }],
        });

        //  console.log(this.broadside);
      });
    axios
      .get(" http://pcapi-xiaotuxian-front-devtest.itheima.net/home/brand?limit=6")
      .then((res) => {
        // console.log(res);
        this.brand = res.data.result;
        // console.log(this.brand);
      });
  },
  methods: {
    textVer(index) {
      this.handBox = index;
      this.show = true;
    },
    textOut() {
      this.handBox = -1;
      this.show = false;
    },
    addrouter(id) {
      this.$router.push({ path: "/sub", query: { id: id } });
    },
  },
};
</script>
<style scoped>
.home-category {
  width: 250px !important;
  height: 500px !important;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 99;
  top: 185px;
  left: 190px;
}
.home-category ul li {
  padding-left: 40px;
  height: 50px;
  line-height: 50px;
  width: 100%;
}
.home-category ul li a {
  margin-right: 4px;
  color: #fff;
  font-size: 14px;
}
.activeText {
  background-color: #27ba9b;
}
.classify {
  width: 990px;
  height: 500px;
  background: hsla(0, 0%, 100%, 0.8);
  position: absolute;
  left: 250px;
  top: 0;
  /* display: none; */
  padding: 0 15px;
}
.classify ul {
  display: flex;
  flex-wrap: wrap;
}
.classify ul li {
  width: 310px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  /* background: #27ba9b; */
}
.brand {
  height: 180px !important;
  width: 310px;
  margin-right: 10px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}
.brand img {
  width: 120px;
  height: 120px;
}
.brand .imgsBox1 {
  width: 120px;
  height: 120px;
  float: left;
  margin-left: -30px;
}
h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 50px;
  height: 50px;
}
.classify span {
  font-size: 16px;
  color: #666;
}
.activeText ul li .components {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 10px;
}
.imgsBox {
  width: 95px !important;
  height: 95px !important;
  /* background: #cf4444; */
  float: left;
  margin-left: -30px;
}
.imgsBox img {
  width: 95px !important;
  height: 100% !important;
}
.detailedinformation {
  padding-left: 10px;
  line-height: 24px;
  width: 190px;

  margin-left: 70px;
  margin-top: 10px;
}
.detailedinformation1 {
  padding-left: 10px;
  line-height: 24px;
  width: 190px;

  margin-left: 70px;
  margin-top: 40px;
}
.introduce {
  font-size: 16px;
  color: #666;
}
.Productname {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price {
  font-size: 22px;
  color: #cf4444;
}
.price1 {
  color: #999;
  font-size: 16px;
  margin-top: 15px;
  margin-left: 20px !important;
}
.Productname1 {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-left: 20px !important;
}
.introduce1 {
  font-size: 16px;
  color: #666;
  margin-left: 20px;
}
</style>